<template>
	<el-card class="box-card">
		<div slot="header" class="clearfix">
			<span>评论列表</span>
		</div>
		<el-table :data="tableData">
			<el-table-column prop="comment_id" label="#" width="50"></el-table-column>
			<el-table-column prop="article_title" label="文章标题" width="150"></el-table-column>
			<el-table-column prop="user_nickname" label="用户"></el-table-column>
			<el-table-column prop="content" label="留言内容"></el-table-column>
			<el-table-column prop="create_time" label="留言日期"></el-table-column>
			<el-table-column prop="reply" label="回复内容"></el-table-column>
			<el-table-column prop="reply_time" label="回复日期"></el-table-column>
			<el-table-column label="状态">
				<template slot-scope="scope">
					<el-tag type="success" v-if="scope.row.is_visible == 1">显示</el-tag>
					<el-tag type="info" v-if="scope.row.is_visible == -1">隐藏</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="200">
				<!-- 复杂结构的固定写法：slot-scope="scope" -->
				<template slot-scope="scope">
					<el-button v-permission="'article:comment:reply'" type="primary" plain icon="el-icon-edit"
						@click="openComment(scope.row)">回复</el-button>
					<el-button v-permission="'article:comment:switch'" type="success" v-if="scope.row.is_visible == -1"
						plain icon="el-icon-view" @click="handleShow(scope.row.comment_id, scope.$index)">显示</el-button>
					<el-button v-permission="'article:comment:switch'" type="info" v-if="scope.row.is_visible == 1" plain
						icon="el-icon-view" @click="handleHide(scope.row.comment_id, scope.$index)">隐藏</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-dialog title="回复评论" :visible.sync="dialogVisible">
			<el-descriptions direction="vertical" :column="2" border>
				<el-descriptions-item label="评论用户">
					<el-link type="primary" href="#">{{ commentData.user_nickname }}</el-link>
				</el-descriptions-item>
				<el-descriptions-item label="评论文章">
					<el-link type="primary" href="#">{{ commentData.article_title }}</el-link>
				</el-descriptions-item>
				<el-descriptions-item label="评论内容">{{ commentData.content }}</el-descriptions-item>
			</el-descriptions>
			<el-input type="textarea" :rows="4" placeholder="请输入回复内容" v-model="textarea" class="comment_text">
			</el-input>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleReply">回复</el-button>
			</span>
		</el-dialog>
	</el-card>
</template>

<script>
import { Comment } from '@/api';
export default {
	name: 'List',
	data() {
		return {
			tableData: [],
			dialogVisible: false,
			commentData: [],
			current_comment: [],
			textarea: '',
		}
	},
	// 在created或mounted发送ajax请求(通过调用函数)
	created() {
		document.title = "评论列表页";
		this.loadList();
	},
	methods: {
		// 一般将发送AJAX写到methods中
		// 加载列表
		async loadList() {
			let { status, msg, data } = await Comment.recent({ pagesize: 10, pageindex: 1 });
			if (status) {
				this.tableData = data;
			} else {
				this.$message.error(msg);
			}
		},
		// 打开编辑弹窗
		openComment(comment) {
			this.commentData = comment;
			this.textarea = comment.reply;
			this.dialogVisible = true;
		},
		// 回复评论
		async handleReply() {
			let { comment_id } = this.commentData;
			let { status, msg } = await Comment.reply({ comment_id: comment_id, reply: this.textarea });
			if (status) {
				// 操作DOM
				this.commentData.reply = this.textarea;
				// 关闭弹窗
				this.dialogVisible = false;
				// 信息提示
				this.$message.success(msg);

			} else {
				this.$message.error(msg);
			}
		},
		async handleShow(id, index) {
			this.$confirm('该操作将显示该评论, 是否继续?', '提示', { type: 'warning' })
				.then(async () => {
					let { status, msg } = await Comment.visible({ comment_id: id, visible: 1 });
					console.log(index);
					if (status) {
						// 操作DOM
						this.tableData[index].is_visible = 1;
						// 信息提示
						this.$message.success(msg);
					} else {
						this.$message.error(msg);
					}
				}).catch(() => {
					this.$message.info("已取消该操作!");
				});
		},
		async handleHide(id, index) {
			this.$confirm('该操作将隐藏该评论, 是否继续?', '提示', { type: 'warning' })
				.then(async () => {
					let { status, msg } = await Comment.visible({ comment_id: id, visible: -1 });
					console.log(index);
					if (status) {
						// 操作DOM
						this.tableData[index].is_visible = -1;
						// 信息提示
						this.$message.success(msg);
					} else {
						this.$message.error(msg);
					}
				}).catch(() => {
					this.$message.info("已取消该操作!");
				});
		},
	},
}
</script>

<style lang="less" scoped>
.clearfix {
	display: flex;
	justify-content: space-between;
}

.comment_text {
	margin-top: 20px;
}

.commentTable {
	border-bottom: 0;
}
</style>
